﻿LOLMatrix.matchCompareDetail = (function () {
    return {
        //雷达图
        radarDefaultOpts: {
                backgroundColor: '#00283a',
                tooltip:{
                    trigger:'item',
                    /*formatter:function(params,t ){
                        console.log(params,t);
                        var obj=params[0];
                        var ret=obj.name+':';
                        var val=obj.value;
                        if(obj.value*1<=0){
                            val*=-1;
                        }
                        ret+=val+'Min';
                        return ret;
                    }*/
                },
                radar: {
                    name: {
                        formatter:'{value}',
                        textStyle: {
                            color:'rgba(255, 255, 255, 0.5)',fontSize:'14'
                        }
                    },

                    //大小
                    radius: '70%',

                    splitNumber: 10,
                    //分隔区域
                    splitArea:{
                        show:true,
                        areaStyle:{   color: ['rgba(250,250,250,0)','rgba(200,200,200,0)']}
                    },

                    //分隔线
                    splitLine:{
                        lineStyle: {
                            color: '#46c1e9'
                        }
                    },

                    //坐标线
                    axisLine:{
                        lineStyle:{color:"#45baeb"}
                    },

                    //此数据由服务端提供
                    indicator: [
                        { name: '一血', max: 100},
                        { name: '一龙', max: 100},
                        { name: '一塔', max: 100},
                        { name: '首大龙', max: 100},
                        { name: '一先锋', max: 100}
                    ]
                },
                series: [{
                    type: 'radar',
                    symbolSize:5,
                    itemStyle: {  normal: {color: 'rgba(255,255,255,0.8)'}},
                    areaStyle: {normal: {color: 'rgba(70,193,233,0.5)'}},

                    //此数据由服务端提供
                    data : []
                }]
        },
        radar:function(){
            var me=this;

            //左
            var leftRadar = echarts.init(document.getElementById('leftRadar'));
            var leftOpts = $.extend(true,{}, me.radarDefaultOpts);
            leftOpts.series[0].data[0]= {
                value : [43, 100, 28, 35, 50],
                name: 'LongZhu Gaming'
            };
            leftRadar.setOption(leftOpts);



            //右
            var rightRadar = echarts.init(document.getElementById('rightRadar'));
            var rightOpts = $.extend(true,{}, me.radarDefaultOpts);
            rightOpts.series[0].data[0]={
                value : [83, 90, 58, 35, 60],
                name: 'SK Telecom T1'
            };
            rightRadar.setOption(rightOpts);
        },

        //时间对比图
        barCompare:function(){
            //柱子上的文字位置
            var labelDown = {
                normal: {  position: 'bottom'}
            };
            var labelUp = {
                normal: {  position: 'top'  }
            };

            //柱子样式
            var itemDown={
                normal:{ barBorderRadius: 2, borderRadius: 2,color:'#054899'}
            };
            var itemUp={
                normal:{ barBorderRadius: 2, borderRadius: 2,color:'#337084'}
            };

            //参数
            var option = {
                //hover 样式与内容
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter:function(params ){
                        var obj=params[0];
                        var ret=obj.name+':';
                        var val=obj.value;
                        if(obj.value*1<=0){
                            val*=-1;
                        }
                        ret+=val+'Min';
                        return ret;
                    }
                },

                //chat 位置
                grid:{top:30,left:50,right:50,bottom:10,containLabel:true},


                yAxis: {
                    type : 'value',
                    name:'Times (Minute)',nameLocation:'end',nameGap:20,nameTextStyle:{fontSize:14},
                    axisLine:{ lineStyle: { color: '#57a8ce' } },
                    splitLine: {  show:false},
                    splitNumber: 10,
                    min: -60, max: 60,
                    axisLabel: {
                        textStyle: { color: 'rgba(255,255,255,0.5)',fontSize:14 },
                        formatter: function (value) {
                            if (value < 0) {
                                value *= -1;
                            }
                            return value;
                        }
                    },
                    axisTick: {
                        show: true,
                        inside: true,
                        lineStyle: { color: '#57a8ce' }
                    }
                },
                xAxis: {
                    type : 'category',
                    axisLabel: {show: false},
                    axisTick: {show: false},
                    splitLine: {show: true,lineStyle: { color: '#013046' }},
                    axisLine: { lineStyle: { color: '#57a8ce' } },

                     //此数据由服务端提供
                    data : [ '一先锋', '一龙', '一塔', '首大龙', '一血']
                },


                //数据
                series : [
                    {
                        type:'bar',
                        label: {
                            normal: {
                                show: true,
                                textStyle:{fontSize:16},
                                formatter:function(obj){
                                    var ret=obj.name+':';
                                    var val=obj.value;
                                    if(obj.value*1<=0){
                                        val*=-1;
                                    }
                                    ret+=val+'Min';
                                    return ret;
                                }
                            }
                        },

                        //此数据内的 value值由服务端提供
                        data:[
                            { value: -17, label: labelDown,itemStyle:itemDown },
                            { value: -23, label: labelDown,itemStyle:itemDown },
                            { value: 20, label: labelUp,itemStyle:itemUp },
                            { value: 44, label: labelUp,itemStyle:itemUp },
                            { value: -10, label: labelDown,itemStyle:itemDown }
                        ]
                    }
                ]
            };

            var barZone = echarts.init(document.getElementById('barZone'));
            barZone.setOption(option);

        }


    }
})();

$(function () {
    var matchCompareDetail = LOLMatrix.matchCompareDetail;
    matchCompareDetail.radar();






   matchCompareDetail.barCompare();
});